/* https://styled-components.com/ */
import styled, { css } from "styled-components";

const DEFAULT_SIZE = "14";

const AppWrapper = styled.div`
  --accent-color: yellow;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;

  .other {
    font-size: ${DEFAULT_SIZE}px;
  }

  .link {
    display: block;
    color: ${(props) => {
      // 全局的theme和当前传入的参数都可以使用
      const { theme } = props;
      return theme.color.primary;
    }};
    ${(props) => {
      const { theme } = props;
      return css`
        ${theme.mixin.wrapv1}
      `;
    }}
    background: ${(props) => {
      switch (props.current) {
        case 1:
          return "yellow";
        case 2:
          return "blue";
        default:
          return "green";
      }
    }};
  }

  .section {
    color: blue;
  }
`;

const AppTitle = styled.h1`
  font-size: 2rem;
  margin-bottom: 1rem;
`;

const AppLink = styled.a.attrs({
  href: "http://www.baidu.com",
  target: "_blank",
  rel: "noopener noreferrer",
})`
  font-size: 2rem;
  margin-bottom: 1rem;
`;

// // attrs 可以接受一个函数
// const Demo = styled.div.attrs((props) => {
//   return {
//     foo: props.color || "blue",
//   };
// })`
//   font-size: 2rem;
// `;

export { AppWrapper, AppTitle, AppLink };
